<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<script type="text/javascript" src="./js/common.js"></script>
	</head>
	<style>
		body {
			background-color: #efeff4;
		}

		.title {
			margin: 20px 15px 10px;
			color: #6d6d72;
			font-size: 15px;
			padding-bottom: 51px;
		}
	</style>
	</head>

	<body>
		<div class="mui-content">
			<input style="display: none;" id="upload" type="file" accept="image/*" class="abc">
			<br>
			<label for="upload">
				<a class="mui-icon-right-nav mui-pull-right">
					<span id="headImage" class="mui-icon mui-icon-camera"></span>
				</a>
				<a class="mui-icon-right-nav mui-pull-right">
					<span id="uploadImage" class="mui-icon mui-icon-upload"></span>
				</a>
			</label>
			<br><br><br><br>	
			<div class="mui-content" style="background-color:#fff">
				<ul id="imgs" class="mui-table-view mui-grid-view"></ul>
			</div>
		</div>
		<script>
			var fileArr = [];
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			document.getElementById('headImage').addEventListener('tap', function() {
				if (mui.os.plus) {
					var buttonTit = [{
						title: "拍照"
					}, {
						title: "从手机相册选择"
					}];


					plus.nativeUI.actionSheet({
						title: "上传图片",
						cancel: "取消",
						buttons: buttonTit
					}, function(b) { /*actionSheet 按钮点击事件*/
						switch (b.index) {
							case 0:
								break;
							case 1:
								getImage(); /*拍照*/
								break;
							case 2:
								galleryImg(); /*打开相册*/
								break;
							default:
								break;
						}
					})
				}
			}, false);


			// 拍照获取图片  
			function getImage() {
				var c = plus.camera.getCamera();
				c.captureImage(function(e) {
					plus.io.resolveLocalFileSystemURL(e, function(entry) {
						var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径  
						setFile(imgSrc);
						setHtml(imgSrc);
					}, function(e) {
						console.log("读取拍照文件错误：" + e.message);
					});
				}, function(s) {
					console.log("error" + s.message);
				}, {
					filename: "_doc/camera/"
				})
			}
			// 从相册中选择图片   
			function galleryImg() {
				// 从相册中选择图片  
				plus.gallery.pick(function(e) {
					for (var i in e.files) {
						var fileSrc = e.files[i];
						setFile(fileSrc);
						setHtml(fileSrc);
					}
				}, function(e) {
					console.log("取消选择图片");
				}, {
					filter: "image",
					multiple: true,
					//maximum: 5,
					system: false,
					onmaxed: function() {
						plus.nativeUI.alert('最多只能选择5张图片');
					}
				});
			}


			function setHtml(path) {
				var str = '';
				str = '<li class="mui-table-view-cell mui-media mui-col-xs-6">' +
					'<img class="mui-media-object" src="' + path + '">' +
					'<span class="mui-icon mui-icon-trash deleteBtn"></span>' +
					//	'<div class="mui-media-body">'+
					//	'<input type="text" class="remark" placeholder="备注">'+
					//	'</div>'+
					'</li>';
				jQuery("#imgs").append(str);
			}

			function setFile(fileSrc) {
				var image = new Image();
				image.src = fileSrc;
				fileArr.push(image);
			}


			document.getElementById('uploadImage').addEventListener('tap', function() {
				var files = fileArr;
				var wt = plus.nativeUI.showWaiting();
				var task = plus.uploader.createUpload('http://192.168.1.111:8181/sys-privilege/Upload', {
						method: "POST"
					},
					function(t, status) { //上传完成
						if (status == 200) {
							alert("上传成功：" + t.responseText);
							wt.close(); //关闭等待提示按钮
						} else {
							alert("上传失败：" + status);
							wt.close(); //关闭等待提示按钮
						}
					}
				);
				//将文件集合添加到上传队列中
				for (var i = 0; i < files.length; i++) {
					var f = files[i];
					task.addFile(f.src, {
						key: i
					});
				}
				//传其他的参数 如备注
				//添加其他参数
				//遍历5个input框

				task.addData("comment", "test");
				task.start();
			});
		</script>
	</body>
</html>
